<template>
  <div class="header">
    <el-row>
      <el-col :span="6">
        <div class="logo-box">
          <a href="/">
            <img src="logo.png" />
          </a>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="nav-bar">
					<!-- 占位 -->
					<p> </p>
				</div>
      </el-col>
      <el-col :span="6">
        <div class="search-box">
					<el-input v-model="search" placeholder="请输入内容"></el-input>
					<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>

				</div>
      </el-col>
      <el-col :span="6">
        <div class="login-box">
					<div v-if="islogin">
						<el-avatar :size="40" :src="circleUrl"></el-avatar>
					</div>
					<div v-else>
					<el-button type="primary" icon="el-icon-user" @click="login">登录</el-button>
					<el-button icon="el-icon-tickets" @click="register">注册</el-button>
					</div>
				</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {search} from '@/API/index.js';
export default {
	data(){
		return{
			search:'',
			islogin:this.$store.state.islogin,
			 circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
		}
	},methods:{
		handleSearch(){
			//搜索按钮事件
			search(this.search).then(res=>{
				this.$store.commit("saveData",{data:res.data.data,total:res.data.total});
			})
		},
		login(){
			//登录按钮事件
			this.$router.push('/login')
		},
		register(){
			//注册按钮事件
			this.$router.push('/register')
		}
	}
};
</script>

<style scoped>
.header {
  height: 10vh;
  width: 100%;

}

.logo-box,.search-box,.login-box{
	/* height: 10vh; */
  display: flex;
  justify-content: center;
  align-content: center;
}
/* -----------------logo样式-------------- */
.logo-box img {
  width: 10vw;
  height: 10vh;
}

/* -----------------搜索框样式-------------- */
.el-input{
	width: 70%;
}
.search-box{
	margin-top: 3vh;
}



.login-box{
	justify-content: flex-end;
	margin-top: 3vh;
	margin-right: 4vw;
}

</style>